var TodoBox = React.createClass({
  getInitialState: function () {
    return {
      data: [
        { "id": "0001", "task": "吃饭", "complete": "false" },
        { "id": "0002", "task": "睡觉", "complete": "false" },
        { "id": "0003", "task": "打豆豆", "complete": "false" },
      ]
    };
  },

  // 切换任务状态
  handleToggleComplete: function (taskId) {
    let data = this.state.data;
    for (let i in data) {
      if (data[i].id == taskId) {
        data[i].complete = data[i].complete === "true" ? "false" : "true";
        break;
      }
    }
    this.setState({ data });
  },

  // 根据Id删除任务
  handleTaskDelete: function (taskId) {
    let data = this.state.data;
    data = data.filter(function (task) {
      return task.id !== taskId;
    });
    this.setState({ data });
  },

  // 给新增的任务一个随机的id
  generateId: function () {
    return Math.floor(Math.random() * 9000) + 1000;
  },

  // 新增一项任务
  handleSubmit: function (task) {
    let data = this.state.data;
    let id = this.generateId();
    data = data.concat([{ "id": id, "task": task, "complete": "false" }]);
    this.setState({ data });
  },

  // 渲染界面
  render: function () {
    let statistics = {
      todoCount: this.state.data.length || 0,
      todoCompleteCount: this.state.data.filter(function (item) {
        return item.complete === "true";
      }).length
    };
    return (
      <div className="well">
        <h1 className="text-center">TodoList</h1>
        <TodoList data={this.state.data}
          todoCount={statistics.todoCount}
          todoCompleteCount={statistics.todoCompleteCount}
          toggleComplete={this.handleToggleComplete}
          deleteTask={this.handleTaskDelete}
        />
        <TodoForm submitTask={this.handleSubmit}></TodoForm>
      </div>
    )
  }
});

let TodoList = React.createClass({
  render: function () {
    let taskList = this.props.data.map(function (listItem) {
      return (
        <TodoItem
          taskId={listItem.id}
          key={listItem.id}
          task={listItem.task}
          complete={listItem.complete}
          toggleComplete={this.props.toggleComplete}
          deleteTask={this.props.deleteTask}
        />
      )
    }, this)
    return (
      <ul className="list-group">
        {taskList}
        <TodoFooter todoCount={this.props.todoCount} todoCompleteCount={this.props.todoCompleteCount}></TodoFooter>
      </ul>
    )
  }
})

let TodoItem = React.createClass({
  toggleComplete: function () {
    this.props.toggleComplete(this.props.taskId);
  },

  // 删除,向父元素传递ID
  deleteTask: function () {
    this.props.deleteTask(this.props.taskId)
  },

  // 鼠标移入显示删除
  handleMouseOver: function () {
    ReactDOM.findDOMNode(this.refs.deleteBtn).style.display = "inline";
  },

  // 鼠标移出隐藏删除
  handleMouseOut: function () {
    ReactDOM.findDOMNode(this.refs.deleteBtn).style.display = "none";
  },
  render: function () {
    // 初始的时候需要接受数据,才能撑开布局
    let task = this.props.task;
    let classes = "list-group-item"
    let itemChecked;
    if (this.props.complete === "true") {
      task = <s>{task}</s>
      itemChecked = true;
      classes += " list-group-item-success"
    } else {
      itemChecked = false;
    }

    return (
      <li className={classes}
        onMouseOver={this.handleMouseOver}
        onMouseOut={this.handleMouseOut}
      >
        <input type="checkbox" className="pull-left" checked={itemChecked} onChange={this.toggleComplete} />
        {task}
        <div className="pull-right">
          <button type="button" className="btn btn-xs close" onClick={this.deleteTask} ref="deleteBtn">删除</button>
        </div>
      </li>
    )
  }
})

let TodoFooter = React.createClass({
  render: function () {
    return (
      <li className="list-group-item">{this.props.todoCompleteCount} 已完成 / {this.props.todoCount} 总数</li>
    )
  }
})

let TodoForm = React.createClass({
  // 提交
  submitTask: function (e) {
    // 阻止向上传递，先判断task是不是空的,如果不是空的再向上传递task
    e.preventDefault();
    let task = ReactDOM.findDOMNode(this.refs.task).value.trim();
    if (!task) {
      return;
    }
    this.props.submitTask(task);
    ReactDOM.findDOMNode(this.refs.task).value = "";
  },

  render: function () {
    return (
      <div>
        <hr />
        <form action="" className="form-horizontal" onSubmit={this.submitTask}>
          <div className="form-group">
            <label htmlFor="" className="col-md-2 control-label">任务</label>
            <div className="col-md-10">
              <input type="text" ref="task" placeholder="你想做点什么" className="form-control" />
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-right">
              <input type="submit" className="btn btn-primary" defaultValue="添加任务" />
            </div>
          </div>
        </form>
      </div>
    )
  }
})

ReactDOM.render(
  <TodoBox />,
  document.getElementById('todoBox')
)